<template>
    <vechart :id="id" :theme="theme" :option="chartoption"></vechart>
</template>

<script>
    import echarts from 'echarts';
    import vechart from './vechart.vue'
    import {theme_blue} from './theme-blue';

    export default {
        components: {vechart},
        props: ["id", "chartData"],
        data() {
            return {
                theme: theme_blue,
                chartoption: {

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            animation: false,
                            label: {
                                backgroundColor: '#505765'
                            }
                        }
                    },

                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLine: {onZero: false},
                            data:
                              this.chartData.xAxis
                            .map(function (str) {
                                return str.replace(' ', '\n')
                            })
                        }
                    ],
                    yAxis: [
                        {
                            name: this.chartData.bottomname,
                            type: 'value',
                            max: 5
                        },
                        {
                            name: this.chartData.topname,
                            nameLocation: 'start',
                            max: 5,
                            type: 'value',
                            inverse: true
                        }
                    ],
                    series: [
                        {
                            type: 'line',
                            data: this.chartData.bottomData,
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#1176ca'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#75bdfa'
                                    }, {
                                        offset: 1,
                                        color: '#0673ce'
                                    }])
                                }
                            },
                        },
                        {
                            type: 'line',
                            yAxisIndex: 1,
                            data: this.chartData.topData,
                            itemStyle: {
                                normal: {
                                    color: '#0c6666'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#1fffff'
                                    }, {
                                        offset: 1,
                                        color: '#048383'
                                    }])
                                }
                            },
                        }
                    ]
                }
            }
        },
        mounted() {
        }
    };
</script>
